<template>
  <comcard>
    <div slot="com_title">商品详情</div>
    <div slot="com_content">
      <template>
        <el-radio-group v-model="size">
          <el-radio label="">默认</el-radio>
          <el-radio label="medium">中等</el-radio>
          <el-radio label="small">小型</el-radio>
          <el-radio label="mini">超小</el-radio>
        </el-radio-group>

        <el-descriptions
          class="margin-top"
          title="商品详情"
          :column="3"
          :size="size"
          border
          :model="formObj"
        >
          <template slot="extra">
            <el-button type="primary" size="small" @click="ret">返回</el-button>
          </template>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              订单号
            </template>
           {{formObj.orderNo}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              下单时间：
            </template>
           {{formObj.orderTime}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              手机号：
            </template>
            {{formObj.phone}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              收货人：
            </template>
            <el-tag size="small">
                {{formObj.consignee}}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              送货地址：
            </template>
       {{formObj.deliverAddress}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              送达时间：
            </template>
           {{formObj.deliveryTime}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              用户备注
            </template>
            {{formObj.remarks}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              手机号：
            </template>
            {{formObj.phone}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              订单金额
            </template>
            {{formObj.orderAmount}}
          </el-descriptions-item>
           <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              订单状态
            </template>
            {{formObj.orderState}}
          </el-descriptions-item>
        </el-descriptions>
      </template>
    </div>
  </comcard>
</template>

<script>
import { api_detail } from "../../api/order";
import Comcard from "../../components/comcard";
export default {
  components: {
    Comcard,
  },
  data() {
    return {
      size: "",
      formObj: {
        data: "",
        id: "",
        orderNo: "",
        orderTime: "",
        phone: "",
        consignee: "",
        deliverAddress: "",
        deliveryTime: "",
        remarks: "",
        orderAmount: "",
        orderState: "",
      },
    };
  },
  mounted() {
      this.query();
  },
  
  methods: {
    async query() {
      let rst = await api_detail({ id: this.$route.query.id });
      this.formObj=rst.data;
      console.log(rst);
    },
    ret(){
        this.$router.push("/order/list");
    }
  },
};
</script>

<style lang="less" scoped></style>
